<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>元素倒影2</title>
        <style>
            body {
                margin: 0;
                background: #000;
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
                perspective: 1000px;
            }

            .card-container {
                position: relative;
                width: 300px;
                height: 300px;
                transform-style: preserve-3d;
                animation: rotate-container 15s infinite linear;
                animation-play-state: paused;
                transform: rotateY(0deg);
            }


            .card-container:hover {
                animation-play-state: paused;
            }

            /* 整体容器旋转的关键帧动画 */
            @keyframes rotate-container {
                0% {
                    transform: rotateY(0deg);
                }

                100% {
                    transform: rotateY(360deg);
                }
            }

            .card {
                position: absolute;
                width: 200px;
                height: 260px;
                left: 50%;
                top: 50%;
                margin-left: -100px;
                margin-top: -130px;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
                overflow: hidden;
                opacity: 0;
                transform-style: preserve-3d;
                backface-visibility: hidden;
                -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.8));
            }

            .card img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                border-radius: 8px;
                transform: rotateY(var(--card-face-rotation, 0deg));
                backface-visibility: hidden;
            }

            /* 单张卡片入场和展开的关键帧动画 */
            @keyframes card-reveal-and-move {
                0% {
                    opacity: 0;
                    transform: translateZ(0) rotateY(0deg);
                }

                5% {
                    opacity: 1;
                    /* 快速变得可见 */
                    transform: translateZ(0) rotateY(0deg);
                }

                50% {
                    opacity: 1;
                    transform: rotateY(var(--final-card-angle)) translateZ(var(--overshoot-z-distance)) rotateY(var(--card-face-rotation));
                }

                100% {
                    opacity: 1;
                    transform: rotateY(var(--final-card-angle)) translateZ(var(--final-card-z-distance)) rotateY(var(--card-face-rotation));
                }
            }
        </style>
    </head>

    <body>
        <div class="card-container" id="container">
            <div class="card"><img src="../public/img/1.jpg" alt="Card 1"></div>
            <div class="card"><img src="../public/img/2.jpg" alt="Card 2"></div>
            <div class="card"><img src="../public/img/3.jpg" alt="Card 3"></div>
            <div class="card"><img src="../public/img/4.jpg" alt="Card 4"></div>
            <div class="card"><img src="../public/img/5.jpg" alt="Card 5"></div>
            <div class="card"><img src="../public/img/6.jpg" alt="Card 6"></div>
        </div>

        <script>
            const container = document.getElementById('container');
            const cards = document.querySelectorAll('.card');
            const cardCount = cards.length;

            const radius = 300;
            const maxOvershootAmount = 120;
            const minOvershootAmount = 0;
            const singleCardAnimationDuration = 2.5;
            const totalDeploymentTime = 3.5;


            const angleStep = 360 / cardCount;


            const cardsWithAnimationData = [];

            cards.forEach((card, index) => {

                const finalCardAngle = index * angleStep;
                // --- 动态计算“过冲”距离 ---
                // 使用 Math.cos() 将角度映射到 [-1, 1] 范围：
                // 0deg -> 1 (最前方)
                // 90deg -> 0 (侧方)
                // 180deg -> -1 (最深处)
                // 270deg -> 0 (另一侧方)
                const angleInRadians = finalCardAngle * Math.PI / 180;
                const cosValue = Math.cos(angleInRadians);

                // 将 cosValue 从 [-1, 1] 线性映射到 [0, 1]
                // 这个 normalizedPosition 在 0deg 时为 1，在 180deg 时为 0。
                const normalizedPosition = (cosValue + 1) / 2;

                // 线性插值计算动态过冲量
                // (maxOvershootAmount - minOvershootAmount) 是过冲量的总范围。
                // normalizedPosition 决定了在这个范围内的比例。
                // 当 normalizedPosition 为 1 (0deg) 时，过冲量为 maxOvershootAmount。
                // 当 normalizedPosition 为 0 (180deg) 时，过冲量为 minOvershootAmount。
                const dynamicOvershootAmount = minOvershootAmount + (maxOvershootAmount - minOvershootAmount) *
                    normalizedPosition;

                // 存储数据，以便后续统一处理动画
                cardsWithAnimationData.push({
                    cardElement: card,
                    finalCardAngle: finalCardAngle,
                    overshootDistance: radius + dynamicOvershootAmount, // 过冲距离是半径+过冲量
                    // 直接存储动态过冲量本身，用于排序
                    dynamicOvershootAmount: dynamicOvershootAmount
                });
            });

            // 根据“动态过冲量”对卡片进行排序：过冲量大的（最大的 dynamicOvershootAmount）在前，过冲量小的在后。
            // 这意味着最靠近屏幕的卡片（过冲量最大）会最先启动动画。
            cardsWithAnimationData.sort((a, b) => b.dynamicOvershootAmount - a.dynamicOvershootAmount);

            // 根据排序后的顺序，为卡片应用动画和计算延迟
            const actualAnimatedCount = cardsWithAnimationData.length;
            const delayBetweenEachCardAnimation = totalDeploymentTime / (actualAnimatedCount > 0 ? actualAnimatedCount :
                1);

            cardsWithAnimationData.forEach((item, sortedIndex) => {
                const card = item.cardElement;

                // 设置CSS变量，供卡片动画和定位使用
                card.style.setProperty('--final-card-angle', `${item.finalCardAngle}deg`);
                card.style.setProperty('--final-card-z-distance', `${radius}px`);
                card.style.setProperty('--overshoot-z-distance', `${item.overshootDistance}px`);
                // 设置图片内容的反向旋转，确保图片始终面向观察者
                card.style.setProperty('--card-face-rotation', `calc(${item.finalCardAngle}deg * -1)`);

                // 应用卡片自身的入场动画
                card.style.animation =
                    `card-reveal-and-move ${singleCardAnimationDuration}s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards`;
                // 动画延迟基于它在排序后的列表中的索引
                card.style.animationDelay = `${sortedIndex * delayBetweenEachCardAnimation}s`;
            });

            /* 计算整体容器旋转动画的启动时间。
               它应该在最后一个动画卡片完成其展开动画之后立即启动。
            */
            let delayBeforeContainerRotate = 0;
            if (actualAnimatedCount > 0) {
                // 最后一个动画卡片是 sortedIndex (actualAnimatedCount - 1)
                // 它的动画开始时间是 (actualAnimatedCount - 1) * delayBetweenEachCardAnimation
                // 加上它的动画持续时间 singleCardAnimationDuration
                delayBeforeContainerRotate = (actualAnimatedCount - 1) * delayBetweenEachCardAnimation +
                    singleCardAnimationDuration;
            } else {
                // 如果没有卡片，则没有动画，容器旋转可以立即开始
                delayBeforeContainerRotate = 0.1; // 给予一个微小的延迟，确保DOM渲染
            }

            /*指定延迟后启动容器的持续旋转动画 */
            setTimeout(() => {
                if (cardCount > 0) {
                    /* 确保有卡片时才启动旋转 */
                    container.style.animationPlayState = 'running'; /* 启动整体旋转动画 */
                }
            }, delayBeforeContainerRotate * 1000); /* 将秒转换为毫秒，因为setTimeout使用毫秒 */
        </script>
    </body>

</html>